<?php
/**
 * 关于技术博客组件
 * 用于展示博客的简介和作者信息
 */
$configKey = isset($configKey) ? $configKey : 'blog-about';
// 从页面配置获取博客关于组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => 'blog-about',
    'title' => '关于技术博客',
    'description' => '分享前沿技术趋势、实用开发技巧和深度行业分析，帮助开发者持续成长。',
    'author' => [
        'name' => '技术团队',
        'title' => '资深开发者与设计师',
        'avatar' => 'https://picsum.photos/seed/blogauthor/100/100'
    ],
    'bg_color' => 'white',
    'border_radius' => 'xl',
    'shadow' => 'sm',
    'padding' => '6'
], $pageConfig['components'][$configKey] ?? []);
?>

<!-- 关于博客 -->
<div id="<?= $data['section_id'] ?>" class="border-2 border-gray-200 rounded-<?= $data['border_radius'] ?> shadow-<?= $data['shadow'] ?> p-<?= $data['padding'] ?> mb-8">
    <h3 class="text-xl font-bold mb-4"><?= htmlspecialchars($data['title']) ?></h3>
    <p class="text-gray-600 mb-4">
        <?= htmlspecialchars($data['description']) ?>
    </p>
    <div class="flex items-center">
        <img src="<?= htmlspecialchars($data['author']['avatar']) ?>" alt="博客作者" class="w-12 h-12 rounded-full mr-4 object-cover">
        <div>
            <h4 class="font-medium"><?= htmlspecialchars($data['author']['name']) ?></h4>
            <p class="text-sm text-gray-500"><?= htmlspecialchars($data['author']['title']) ?></p>
        </div>
    </div>
</div>